<template>
  <div>
    <myheader title="传智博客 黑马程序员Vue.js"></myheader>

    <comment :commentList="commentList" @click="publish"></comment>

    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-if="haveMore"
      >加载更多</van-button
    >

    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-else
      >没有更多</van-button
    >
  </div>
</template>

<script>
import comment from "@/components/comment";
import myheader from "@/components/myheader";
import { getcomments, postcomments } from "@/Api/comment.js";
export default {
  data() {
    return {
      pageindex: 1,
      commentList: [],
      haveMore: true, //是否还有更多数据
    };
  },
  components: {
    comment,
    myheader,
  },
  async mounted() {
    // 获取本地购物车数量
    // console.log(this.$route.params.id);
    // let artid = this.$route.params.id;
    // let pageindex = this.pageindex;
    // let res = await getcomments(artid, this.pageindex);
    // console.log(res);
    // this.commentList = res.data.message;
    // console.log(this.commentList);
    this.init();
  },
  methods: {
    async publish(comment) {
      if (comment == "") {
        this.$toast("不能留空");
        return;
      } else {
        // console.log(comment);
        // console.log(this.$route.params.id);
        let res = await postcomments(this.$route.params.id, {
          content: comment,
        });
        // console.log(res);

        let artid = this.$route.params.id;
        // let pageindex = this.pageindex;
        let res2 = await getcomments(artid, 1);
        // console.log(res);
        this.commentList = res2.data.message;

        // this.init();
      }
    },
    async init() {
      let artid = this.$route.params.id;
      // let pageindex = this.pageindex;
      let res = await getcomments(artid, this.pageindex);
      // console.log(res);
      this.commentList = res.data.message;
    },

    // 点击加载更多
    async loadMore() {
      this.pageindex++;
      // this.init();
      let id = this.$route.params.id;
      let res = await getcomments(id, this.pageindex);
      this.commentList.push(...res.data.message);
      if (res.data.message.length < 10) {
        this.haveMore = false;
      }
      // console.log(this.commentList);
    },
  },
};
</script>

<style>
</style>